<template>
  <div>
    <button @click="currentComponent = 'componentA'">显示componentA</button>
    <button @click="currentComponent = 'componentB'">显示componentB</button>
    <button @click="currentComponent = 'componentC'">显示componentC</button>

    <h2>使用动态组件</h2>
    <component :is="components[currentComponent]"></component>


    <h2>使用keep-alive缓存组件</h2>
    <keep-alive :include="['componentB','componentC']">
        <component :is="components[currentComponent]"></component>
    </keep-alive>


    <h2>使用异步组件</h2>
    <button @click="show = show == true ? false : true">显示异步组件</button>
    <componentD v-if="show"></componentD>
  </div>
</template>

<script setup>
defineOptions({
    name: 'asyncComponent'
})
import { ref, computed } from 'vue'
import componentA from './componentA.vue'
import componentB from './componentB.vue'
import componentC from './componentC.vue'

// DefileAsyncComponent 创建一个只有在需要时才会加载的异步组件。
import { defineAsyncComponent } from 'vue'

const currentComponent = ref('componentA')
// 默认显示componentA
const show = ref(false)

// 将组件componentD单独拎出来，作为懒加载的异步组件
const componentD = defineAsyncComponent(() => import('./componentD.vue'))


const components = computed(() => ({
    componentA,
    componentB,
    componentC
}))
</script>

<style  lang="scss" scoped>
</style>